<template>
  <div
    v-for="item in detailData"
    :key="item.id"
  >
    <div class="bgimg">
      <img
        src="https://img.zcool.cn/community/01ed32554c1487000001bf72f2ebe8.jpg@2o.jpg"
        alt=""
      >
    </div>
    <!-- 基础信息 B -->
    <div class="basis">
      <div class="card">
        <div class="img">
          <!-- <img
                src="https://www.pohome.cn/upload/img/pet/avatar/large/168513108617724736.jpeg"
                alt=""
                > -->
          <img
            :src="item.img"
            alt=""
          >
        </div>
        <div class="card-body">
          <div class="name">{{item.name}}</div>
          <div class="age">年龄：<span>{{item.age}}</span></div>
          <div class="gender">性别：<span>{{ item.gender }}</span></div>
          <div class="shape">体型：<span>{{ item.shape }}</span></div>
          <div class="variety">品种：<span>{{ item.species }}</span></div>
          <div class="notice">领养需知：<span>{{ item.notice }}</span></div>
          <div
            class="btn"
            @click="to"
          >我要领养</div>
        </div>
      </div>
    </div>
    <!-- 基础信息 E -->
    <!-- 过往 B -->
    <div class="past">
      <div class="t">『 <span>{{item.name}}</span> 』的故事</div>
      <div
        v-for="(txt,index) in item.imges"
        :key="index"
      >
        <div class="img"><img :src="txt.img" /></div>
        <div class="p">{{ txt.text }}</div>
      </div>
    </div>
    <!-- 过往 E -->
    <!-- 图片 B -->
    <div class="pastimg">
      <div class="t">『 <span>{{item.name}}</span> 』的图片</div>
      <div class="pastimg-body">
        <div
          class="img"
          v-for="(txt,index) in item.imgs"
          :key="index"
        >
          <img :src="txt.img" />
        </div>
      </div>
    </div>
  </div>

  <!-- 图片 E -->
</template>
<script setup>
import router from '@/router'
import { ref, onMounted } from 'vue'
import axios from 'axios'
const detailData = ref([])
onMounted(() => {
  let id = sessionStorage.getItem('id')
  let api = 'https://apifoxmock.com/m2/4457699-4103776-default/183151415?id='
  axios.get(api + id).then((res) => {
    detailData.value = res.data
    console.log(detailData.value)
  })
})
function to() {
  router.push({ path: '/application' })
}
</script>
<style scoped>
.basis {
  width: 100%;
  padding: 10px 15%;
  margin-top: 20px;
}

.basis .card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.basis .card .img {
  width: 25%;
}
.basis .img img {
  width: 100%;
}
.basis .card-body {
  width: 75%;
  padding: 0 5%;
}
.basis .name {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: 5px;
}
.basis .age,
.basis .gender,
.basis .shape,
.basis .variety,
.basis .notice {
  font-size: 1.1rem;
}
.basis .age span,
.basis .gender span,
.basis .shape span,
.basis .variety span,
.basis .notice span {
  font-size: 1rem;
}
.basis .btn {
  margin-top: 20px;
  width: 100px;
  text-align: center;
  padding: 10px;
  color: #fff;
  letter-spacing: 2px;
  background-color: var(--myc);
  border-radius: 5px;
}
.basis .btn:hover {
  cursor: pointer;
  background-color: var(--mych);
}

.past {
  width: 100%;
  padding: 10px 15%;
}

.past .t,
.past .t span {
  font-size: 1.5rem;
  color: var(--myc);
  font-weight: 600;
}
.past .t {
  border-bottom: 1px solid var(--myc);
  margin: 30px 0;
}

.past .img {
  width: 100%;
  text-align: center;
}
.past .img img {
  /* width: 30%; */
  max-width: 55%;
}

.past .p {
  width: 100%;
  padding: 20px;
}

.pastimg {
  width: 100%;
  padding: 10px 15%;
}

.pastimg .t,
.pastimg .t span {
  font-size: 1.5rem;
  color: var(--myc);
  font-weight: 600;
}
.pastimg .t {
  margin-bottom: 30px;
  border-bottom: 1px solid var(--myc);
}
.pastimg-body {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.pastimg-body .img {
  width: 23%;
  max-height: 200px;
  overflow: hidden;
  margin: 5px 1%;
  display: flex;
  align-items: center;
  transition: 1s;
}
.pastimg .img img {
  width: 100%;
  transition: 0.6s;
}

.pastimg .img img:hover {
  transform: scale(1.1);
}
@media (max-width: 1000px) {
  .basis .card .img,
  .basis .card-body {
    width: 100%;
    padding: 0;
  }

  .basis .card .img img {
    width: 50%;
  }
}
@media (max-width: 700px) {
  .basis .card .img img {
    width: 100%;
  }
  .past {
    padding: 15px;
  }
  .pastimg {
    padding: 15px;
  }
  .pastimg .img {
    width: 30%;
    height: 80px;
  }
}
</style>